<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

import MobileTabbar from '@/components/MobileTabbar.vue'
import QuickAccessMenu from '@/components/QuickAccessMenu.vue'
import Toast from '@/components/Toast.vue'

// 使用stores和router
const appStore = useAppStore()
const userStore = useUserStore()
const router = useRouter()

// 认证重定向处理函数
const handleAuthRedirect = (event: CustomEvent) => {
  const { path } = event.detail
  console.log('重定向到:', path)
  router.push(path)
}

/**
 * 初始化应用
 */
onMounted(() => {
  // 初始化应用设置
  appStore.initApp()
  
  // 注意：用户初始化已在 main.ts 的 initializeApp() 中处理
  // 这里只需要加载阅读器设置
  userStore.loadReaderSettings()
  
  // 只监听重定向事件，认证失效由userStore内部处理
  window.addEventListener('auth:redirect', handleAuthRedirect as EventListener)
})

/**
 * 清理事件监听器
 */
onUnmounted(() => {
  window.removeEventListener('auth:redirect', handleAuthRedirect as EventListener)
})
</script>

<template>
  <div id="app" class="app">

    
    <!-- 全局加载指示器 -->
    <el-loading-service
      v-if="appStore.loading"
      lock
      text="加载中..."
      background="rgba(0, 0, 0, 0.7)"
    />
    
    <!-- 路由视图 -->
    <div class="mobile-main" :class="{ 'has-tabbar': true }">
    <router-view />
    </div>
    
    <!-- 移动端底部导航 -->
    <MobileTabbar />
    
    <!-- 快速访问菜单 -->
    <QuickAccessMenu />
    
    <!-- Toast 提示组件 -->
    <Toast />
  </div>
</template>

<style lang="scss">
.app {
  min-height: 100vh;
  background-color: var(--bg-primary);
  transition: all 0.3s ease;
}

// Element Plus 组件样式覆盖
.el-loading-mask {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.el-loading-text {
  color: var(--primary-color) !important;
  font-size: 16px !important;
}

.el-loading-spinner {
  .path {
    stroke: var(--primary-color) !important;
  }
}

// 全局滚动条样式
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-tertiary) var(--bg-secondary);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: 4px;
  
  &:hover {
    background: var(--text-secondary);
  }
}

// 响应式字体大小
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 13px;
  }
}
</style>
